<template>
  <view class="server">
    <Header></Header>
    <view class="content" v-if="false">
      <view class="main">
        <view class="title">
          <view class="left">
            <text>我的应用</text>
          </view>
          <view class="right edit" @click="onEdit">
            <text style="color: #4f73fe; margin-right: 10rpx">{{
              edit ? "修改" : "编辑"
            }}</text>
          </view>
        </view>
        <view class="iconList">
          <draggable
            style="width: 100%"
            :disabled="!edit"
            class="ul-draggable"
            element="ul"
            v-model="myMoudles"
          >
            <block v-for="(item, index) in myMoudles" :key="index">
              <view
                class="data list-group-item"
                :class="index >= 4 ? 'datas' : ''"
                @click="onDel(item, index)"
              >
                <view class="icon" @click="!edit && onWebView(item)">
                  <image :src="item.icon" class="images"></image>
                  <image
                    v-if="edit"
                    src="/static/server/delete.png"
                    class="images1"
                  ></image>
                </view>
                <view class="text">
                  {{ item.title }}
                </view>
              </view>
            </block>
          </draggable>
        </view>
      </view>
    </view>
    <view class="content" v-if="!this.edit && this.islogined">
      <view class="main">
        <view class="title">
          <view class="left">
            <text>最近使用</text>
          </view>
        </view>
        <view class="iconList">
          <block v-for="(item, index) in recent" :key="index">
            <view
              class="data list-group-item"
              :class="index >= 4 ? 'datas' : ''"
              @click="onAdd(item, index)"
            >
              <view class="icon" @click="!edit && onWebView(item)">
                <image :src="item.icon" class="images"></image>
                <image
                  v-if="edit"
                  src="/static/server/add.png"
                  class="images1"
                ></image>
              </view>
              <view class="text">
                {{ item.title }}
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="main">
        <view class="title">
          <view class="left">
            <text>奉献爱心</text>
          </view>
        </view>
        <view class="iconList">
          <block v-for="(item, index) in fxax" :key="index">
            <view
              class="data list-group-item"
              :class="index >= 4 ? 'datas' : ''"
              @click="onAdd(item, index)"
            >
              <view class="icon" @click="!edit && onWebView(item)">
                <image :src="item.icon" class="images"></image>
                <image
                  v-if="edit"
                  src="/static/server/add.png"
                  class="images1"
                ></image>
              </view>
              <view class="text">
                {{ item.title }}
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="main">
        <view class="title">
          <view class="left">
            <text>参与活动</text>
          </view>
        </view>
        <view class="iconList">
          <block v-for="(item, index) in cyhd" :key="index">
            <view
              class="data list-group-item"
              :class="index >= 4 ? 'datas' : ''"
              @click="onAdd(item, index)"
            >
              <view class="icon" @click="!edit && onWebView(item)">
                <image :src="item.icon" class="images"></image>
                <image
                  v-if="edit"
                  src="/static/server/add.png"
                  class="images1"
                ></image>
              </view>
              <view class="text">
                {{ item.title }}
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="main">
        <view class="title">
          <view class="left">
            <text>加入组织</text>
          </view>
        </view>
        <view class="iconList">
          <block v-for="(item, index) in jrzz" :key="index">
            <view
              class="data list-group-item"
              :class="index >= 4 ? 'datas' : ''"
              @click="onAdd(item, index)"
            >
              <view class="icon" @click="!edit && onWebView(item)">
                <image :src="item.icon" class="images"></image>
                <image
                  v-if="edit"
                  src="/static/server/add.png"
                  class="images1"
                ></image>
              </view>
              <view class="text">
                {{ item.title }}
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="main">
        <view class="title">
          <view class="left">
            <text>我要求助</text>
          </view>
        </view>
        <view class="iconList">
          <block v-for="(item, index) in wyqz" :key="index">
            <view
              class="data list-group-item"
              :class="index >= 4 ? 'datas' : ''"
              @click="onAdd(item, index)"
            >
              <view class="icon" @click="!edit && onWebView(item)">
                <image :src="item.icon" class="images"></image>
                <image
                  v-if="edit"
                  src="/static/server/add.png"
                  class="images1"
                ></image>
              </view>
              <view class="text">
                {{ item.title }}
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="main">
        <view class="title">
          <view class="left">
            <text>我要办事</text>
          </view>
        </view>
        <view class="iconList">
          <block v-for="(item, index) in wybs" :key="index">
            <view
              class="data list-group-item"
              :class="index >= 4 ? 'datas' : ''"
              @click="onAdd(item, index)"
            >
              <view class="icon" @click="!edit && onWebView(item)">
                <image :src="item.icon" class="images"></image>
                <image
                  v-if="edit"
                  src="/static/server/add.png"
                  class="images1"
                ></image>
              </view>
              <view class="text">
                {{ item.title }}
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Header from "./components/Header.vue";
import draggable from "vuedraggable";
export default {
  components: {
    Header,
    draggable,
  },

  data() {
    return {
      islogined: false,
      enabled: true,
      dragging: false,
      edit: false,
      //奉献爱心
      fxax_codes: ["wyjk", "wyjw", "zxgxbjxyxdj", "qgytzz","cwjjx"],
      //参与活动
      cyhd_codes: ["jhypxbm", "hyhd", "zyzhd", "jjx"],
      //加入组织
      jrzz_codes: ["grrh", "ttrh", "grzh", "ttzh", "jnhf", "cwzyz", "jrzyzdw","jrjyd"],
      //我要求助
      wyqz_codes: ["wyqz", "yjhj"],
      //我要办事
      wybs_codes: [
        "jfsc",
        "wykp",
        "wyzx",
        "czaed",
        "zhhszhytj",
        "wyfbwz",
        "wyjy",
        "zxxx",
        "sljjwz",
        "bajy",
        "jhez",
        "lxhh",
      ],
      fxax: [],
      cyhd: [],
      jrzz: [],
      wyqz: [],
      wybs: [],
      //所有模块
      allMoudles: [
        {
          title: "我要捐款",
          code: "wyjk",
          icon: "/static/server/my1.png", //控制定位的icon
          url: "https://app15.hzgsredcross.org.cn/JwProjectInfo/IndexNew?par=zonghe", //所要跳转的url地址
        },
        {
          title: "我要捐物",
          code: "wyjw",
          icon: "/static/server/my2.png", //控制定位的icon
          url: "https://app15.hzgsredcross.org.cn/JKDetailInfo/IndexNew?par=zonghe", //所要跳转的url地址
        },
        {
          title: "个人入会",
          code: "grrh",
          icon: "/static/server/my3.png", //控制定位的icon
          url: "https://www.redcross668.com/Login/Register?areaId=940", //所要跳转的url地址
        },
        {
          title: "成为志愿者",
          code: "cwzyz",
          icon: "/static/server/recently2.png", //控制定位的icon
          url: "https://www.redcross668.com/Users/HyVolunteer/Index?areaId=940", //所要跳转的url地址
        },
        {
          title: "志愿者活动",
          code: "zyzhd",
          icon: "/static/server/recently3.png", //控制定位的icon
          url: "https://www.redcross668.com/HyActivityIndex/Index?areaId=940", //所要跳转的url地址
        },
        {
          title: "加入志愿者队伍",
          code: "jrzyzdw",
          icon: "/static/server/icon9.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "会员活动",
          code: "hyhd",
          icon: "/static/server/recently1.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "团体入会",
          code: "ttrh",
          icon: "/static/server/my4.png", //控制定位的icon
          url: "https://www.redcross668.com/Login/TeamRegist?areaId=940", //所要跳转的url地址
        },
        {
          title: "我要求助",
          code: "wyqz",
          icon: "/static/server/my5.png", //控制定位的icon
          url: "https://www.redcross668.com/HyMemProjectInfoIndex/index", //所要跳转的url地址
        },
        // {
        //   title: "捐物记录",
        //   code: "jwjl",
        //   icon: "/static/server/my6.png", //控制定位的icon
        //   url: "https://app15.hzgsredcross.org.cn/Jw/JkInfo/MyListNew", //所要跳转的url地址
        // },
        // {
        //   title: "捐款记录",
        //   code: "jkjl",
        //   icon: "/static/server/my7.png", //控制定位的icon
        //   url: "https://app15.hzgsredcross.org.cn/Jw/JwProjectDonate/MyListNew", //所要跳转的url地址
        // },
        {
          title: "集锦秀",
          code: "jjx",
          icon: "/static/server/recently4.png", //控制定位的icon
          url: "https://www.redcross668.com/Users/HyFriendMessage/Add", //所要跳转的url地址
        },
        {
          title: "器官（遗体、组织）",
          code: "qgytzz",
          icon: "/static/server/recommend1.png", //控制定位的icon
          url: "http://app22.hzgsredcross.org.cn/addqgjx.aspx?quId=1", //所要跳转的url地址
        },
        {
          title: "一键呼救",
          code: "yjhh",
          icon: "/static/server/recommend2.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        // {
        //   title: "救援记录",
        //   code: "jyjl",
        //   icon: "/static/server/recommend3.png", //控制定位的icon
        //   url: "https://hzgsapp3.hzgsredcross.org.cn/Rescue/User/MyResAnswer.aspx", //所要跳转的url地址
        // },
        {
          title: "呼救记录",
          code: "hjjl",
          icon: "/static/server/recommend4.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "我要发表文章",
          code: "wyfbwz",
          icon: "/static/server/icon1.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "我要建议",
          code: "wyjy",
          icon: "/static/server/icon2.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "在线学习",
          code: "zxxx",
          icon: "/static/server/icon3.png", //控制定位的icon
          url: "http://app22.hzgsredcross.org.cn/StudyVideoList.aspx?quId=1&ctId=1", //所要跳转的url地址
        },
        {
          title: "申领急救物资",
          code: "sljjwz",
          icon: "/static/server/icon4.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "救护E站",
          code: "jhez",
          icon: "/static/server/icon5.png", //控制定位的icon
          url: "https://app31.hzgsredcross.org.cn/Scenice/default", //所要跳转的url地址
        },
        {
          title: "联系红会",
          code: "lxhh",
          icon: "/static/server/icon6.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "博爱家园",
          code: "bajy",
          icon: "/static/server/icon7.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "积分商城",
          code: "jfsc",
          icon: "/static/server/icon8.png", //控制定位的icon
          url: "https://www.redcross668.com/productIndex/list?areaId=940", //所要跳转的url地址
        },
        {
          title: "救护员培训报名",
          code: "jhypxbm",
          icon: "/static/server/icon10.png", //控制定位的icon
          url: "https://app22.hzgsredcross.org.cn/index.aspx", //所要跳转的url地址
        },
        // {
        //   title: "培训记录",
        //   code: "pxjl",
        //   icon: "/static/server/icon11.png", //控制定位的icon
        //   url: "http://app22.hzgsredcross.org.cn/User/LifeGuardExamRecord.aspx", //所要跳转的url地址
        // },
        {
          title: "我要开票",
          code: "wykp",
          icon: "/static/server/icon12.png", //控制定位的icon
          url: "https://app15.hzgsredcross.org.cn/Jw/JkInfo/MyListNew?par=zonghe", //所要跳转的url地址
        },
        {
          title: "我要咨询",
          code: "wyzx",
          icon: "/static/server/icon13.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        // {
        //   title: "捐赠证书",
        //   code: "jzzs",
        //   icon: "/static/server/icon14.png", //控制定位的icon
        //   url: "", //所要跳转的url地址
        // },
        // {
        //   title: "积分记录",
        //   code: "jfjl",
        //   icon: "/static/server/icon15.png", //控制定位的icon
        //   url: "", //所要跳转的url地址
        // },
        {
          title: "查找AED",
          code: "czaed",
          icon: "/static/server/icon16.png", //控制定位的icon
          url: "https://aedmap.redcross668.com/index/aed/amap", //所要跳转的url地址
        },
        {
          title: "造血干细胞捐献意向登记",
          code: "zxgxbjxyxdj",
          icon: "/static/server/icon17.png", //控制定位的icon
          url: "http://app22.hzgsredcross.org.cn/addzxgxb.aspx?quId=1", //所要跳转的url地址
        },
        {
          title: "个人转会",
          code: "grzh",
          icon: "/static/server/icon18.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "团体转会",
          code: "ttzh",
          icon: "/static/server/icon19.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "缴纳会费",
          code: "jnhf",
          icon: "/static/server/icon20.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
        {
          title: "智慧红十字一体机",
          code: "zhhszhytj",
          icon: "/static/server/icon21.png", //控制定位的icon
          url: "", //所要跳转的url地址
        },
		{
		  title: "成为急救侠",
		  code: "cwjjx",
		  icon: "/static/server/icon22.png", //控制定位的icon
		  url: "https://app15.hzgsredcross.org.cn/jh/help/help.html?returnUrl=https://hzgsapp3.hzgsredcross.org.cn/Home.aspx", //所要跳转的url地址
		},
		{
		  title: "加入救援队",
		  code: "jrjyd",
		  icon: "/static/server/icon23.png", //控制定位的icon
		  url: "", //所要跳转的url地址
		},
        // ,{
        // 	title: '更多应用',
        // 	icon: '/static/server/my8.png', //控制定位的icon
        // 	url: '', //所要跳转的url地址
        // }
      ],
      //我的应用
      myMoudles: [],
      //最近使用
      recent: [],
      //所有应用
      all: [],
    };
  },
  mounted() {},
  onLoad() {},
  onShow() {
    let userInfo = uni.getStorageSync("userInfo");
    if (userInfo) {
      this.islogined = true;
    }
    setTimeout(() => {
      this.mathMoudlesByType();
      //this.getMyMoudles();
      this.getRecentMoudles();
    }, 100);
  },
  methods: {
    mathMoudlesByType() {
      this.fxax = [];
      for (var i = 0; i < this.fxax_codes.length; i++) {
        for (var j = 0; j < this.allMoudles.length; j++) {
          if (this.fxax_codes[i] == this.allMoudles[j].code) {
            this.fxax.push(this.allMoudles[j]);
          }
        }
      }

      this.cyhd = [];
      for (var i = 0; i < this.cyhd_codes.length; i++) {
        for (var j = 0; j < this.allMoudles.length; j++) {
          if (this.cyhd_codes[i] == this.allMoudles[j].code) {
            this.cyhd.push(this.allMoudles[j]);
          }
        }
      }

      this.jrzz = [];
      for (var i = 0; i < this.jrzz_codes.length; i++) {
        for (var j = 0; j < this.allMoudles.length; j++) {
          if (this.jrzz_codes[i] == this.allMoudles[j].code) {
            this.jrzz.push(this.allMoudles[j]);
          }
        }
      }

      this.wyqz = [];
      for (var i = 0; i < this.wyqz_codes.length; i++) {
        for (var j = 0; j < this.allMoudles.length; j++) {
          if (this.wyqz_codes[i] == this.allMoudles[j].code) {
            this.wyqz.push(this.allMoudles[j]);
          }
        }
      }

      this.wybs = [];
      for (var i = 0; i < this.wybs_codes.length; i++) {
        for (var j = 0; j < this.allMoudles.length; j++) {
          if (this.wybs_codes[i] == this.allMoudles[j].code) {
            this.wybs.push(this.allMoudles[j]);
          }
        }
      }
    },
    //计算所有应用
    mathAll() {
      this.all = [];
      for (var j = 0; j < this.allMoudles.length; j++) {
        var has = false;
        for (var i = 0; i < this.myMoudles.length; i++) {
          if (this.myMoudles[i].code == this.allMoudles[j].code) {
            has = true;
            break;
          }
        }
        if (!has) {
          this.all.push(this.allMoudles[j]);
        }
      }
    },
    //获取我的应用
    getMyMoudles() {
      return new Promise((resolve) => {
        let userInfo = uni.getStorageSync("userInfo");
        if (!userInfo) {
          this.mathAll();
          return;
        }
        uni.request({
          url: "http://redcrossadmin.isaw.top/api/Moudle/GetMyMoudles", //仅为示例，并非真实接口地址。
          data: {},
          method: "GET",
          header: {
            Authorization: userInfo.token,
          },
          success: (res) => {
            if (res.data.code == 1) {
              this.myMoudles = [];
              for (var i = 0; i < res.data.data.length; i++) {
                for (var j = 0; j < this.allMoudles.length; j++) {
                  if (res.data.data[i] == this.allMoudles[j].code) {
                    this.myMoudles.push(this.allMoudles[j]);
                    break;
                  }
                }
              }
            }
            this.mathAll();
          },
        });
      }).catch((e) => {
        this.mathAll();
      });
    },
    //获取最近使用
    getRecentMoudles() {
      let userInfo = uni.getStorageSync("userInfo");
      if (!userInfo) {
        return;
      }
      uni.request({
        url: "http://redcrossadmin.isaw.top/api/Moudle/GetMyRecentMoudles", //仅为示例，并非真实接口地址。
        data: {},
        method: "GET",
        header: {
          Authorization: userInfo.token,
        },
        success: (res) => {
          if (res.data.code == 1) {
            this.recent = [];
            for (var i = 0; i < res.data.data.length; i++) {
              for (var j = 0; j < this.allMoudles.length; j++) {
                if (res.data.data[i] == this.allMoudles[j].code) {
                  this.recent.push(this.allMoudles[j]);
                  break;
                }
              }
            }
          }
        },
      });
    },
    //保存修改
    updateMyMoudles() {
      let userInfo = uni.getStorageSync("userInfo");
      var moudles = [];
      for (var i = 0; i < this.myMoudles.length; i++) {
        moudles.push(this.myMoudles[i].code);
      }
      uni.request({
        url: "http://redcrossadmin.isaw.top/api/Moudle/UpdateMyMoudles", //仅为示例，并非真实接口地址。
        data: {
          moudles: moudles,
        },
        method: "POST",
        header: {
          Authorization: userInfo.token,
        },
        success: (res) => {
          if (res.data.code == 1) {
            this.getMyMoudles();
            this.getRecentMoudles();
          }
          if (res.data.code == 2) {
            uni.navigateTo({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
    //跳转列表对应页面
    onWebView({ url, code }) {
      // #ifdef  H5
      let userInfo = uni.getStorageSync("userInfo");
      if (userInfo) {
        uni.request({
          url: "http://redcrossadmin.isaw.top/api/Moudle/VisitMoudle", //仅为示例，并非真实接口地址。
          data: {
            moudleCode: code,
          },
          method: "POST",
          header: {
            Authorization: userInfo.token,
          },
          success: (res) => {
              this.jumpUrl(url, code);
          },
        });
      } else {
          this.jumpUrl(url, code);
      }
      // #endif
    },
    jumpUrl(url, code) {
      if (["wyjw", "wyjk", "wykp","cwjjx"].indexOf(code) >= 0) {
        this.avoidLogin(url);
      }else if(["jhypxbm","zxgxbjxyxdj","qgytzz"].indexOf(code) >= 0){
		  this.app22AvoidLogin(url);
	  } else {
		if(url){
			 window.location.href = url;
		}else{
			uni.showModal({
			  title: "提示",
			  content: "此功能暂未开放，敬请期待 ！",
			  success: function (res) {
			    if (res.confirm) {
			      console.log("用户点击确定");
			    } else if (res.cancel) {
			      console.log("用户点击取消");
			    }
			  },
			});
		}
      }
    },
	app22AvoidLogin(url) {
	  return new Promise((resolve) => {
	    let userInfo = uni.getStorageSync("userInfo");
	    if (!userInfo) {
	      uni.navigateTo({
	        url: "/pages/login/login",
	      });
	      return;
	    }
	    uni.request({
	      url: "http://redcrossadmin.isaw.top/api/Login/App22AvoidLoginSign", //仅为示例，并非真实接口地址。
	      data: {
	        redirectUrl: url,
	      },
	      method: "POST",
	      header: {
	        Authorization: userInfo.token,
	      },
	      success: (res) => {
	        if (res.data.code == 1) {
	          var href =
	            "http://app22.hzgsredcross.org.cn/publicInterface/HhMLogin.aspx?mobile=" +
	            res.data.data.model.mobile +
	            "&nickname=" +
	            res.data.data.model.nickname +
	            "&idCard=" +
	            res.data.data.model.idCard +
	            "&sign=" +
	            res.data.data.sign +
	            "&redirectUrl=" +
	            url;
	          //console.log(href);
	          window.location.href = href;
	        }
	      },
	    });
	  }).catch((e) => {});
	},
    avoidLogin(url) {
      return new Promise((resolve) => {
        let userInfo = uni.getStorageSync("userInfo");
        if (!userInfo) {
          uni.navigateTo({
            url: "/pages/login/login",
          });
          return;
        }
        uni.request({
          url: "http://redcrossadmin.isaw.top/api/Login/AvoidLoginSign", //仅为示例，并非真实接口地址。
          data: {
            redirectUrl: url,
          },
          method: "POST",
          header: {
            Authorization: userInfo.token,
          },
          success: (res) => {
            if (res.data.code == 1) {
              var href =
                "https://app15.hzgsredcross.org.cn/Home/ZHHT?mobile=" +
                res.data.data.model.mobile +
                "&nickname=" +
                res.data.data.model.nickname +
                "&timestamp=" +
                res.data.data.model.timestamp +
                "&sign=" +
                res.data.data.sign +
                "&redirectUrl=" +
                url;
              //console.log(href);
              window.location.href = href;
            }
          },
        });
      }).catch((e) => {});
    },
    //编辑状态
    onEdit() {
      this.edit = !this.edit;
      if (!this.edit) {
        this.updateMyMoudles();
      }
    },
    //删除状态
    onDel(item, index) {
      if (this.edit) {
        //如果有有isCommonly,则为常用的
        const { code, title, icon, url } = this.myMoudles[index];
        this.myMoudles.splice(index, 1);
        this.all.push({
          code,
          title,
          icon,
          url,
        });
      }
    },
    //添加
    onAdd(item, index) {
      if (this.edit) {
        this.myMoudles.push({
          title: item.title,
          icon: item.icon, //控制定位的icon
          url: item.url, //所要跳转的url地址
          code: item.code,
        });
        this.all.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.server {
  background: #f6f6f6;
  padding-bottom: 150rpx;
}
.content {
  margin: 0 25rpx 20rpx 25rpx;
  background: #ffffff;
  border-radius: 15rpx;
  .main {
    .title {
      padding: 21rpx 25rpx 0 25rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 30rpx;
        font-family: PingFang;
        font-weight: bold;
        color: #222222;
      }
      .edit {
        color: #222222;
      }
    }

    .iconList {
      margin-top: 30rpx;
      width: auto;
      border-radius: 5rpx;
      display: flex;
      justify-content: flex-start;
      white-space: nowrap;
      flex-wrap: wrap;
      .data {
        margin-bottom: 30rpx;
        flex-basis: 25%;
        box-sizing: border-box;
        text-align: center;
        .icon {
          flex-grow: 1;
          position: relative;
          .images {
            width: 45rpx;
            height: 43rpx;
          }
          .images1 {
            width: 27rpx;
            height: 27rpx;
            border-radius: 50%;
            position: absolute;
            right: 30%;
            top: -10rpx;
            transform: translate(60%, 0);
          }
        }
        .text {
          width: 100%;
          padding: 7rpx 26rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 24rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #222222;
        }
      }
    }
  }
}
.list-group {
  width: 100%;
  height: auto;
}
.list-group-item_img {
  position: absolute;
  width: 16px;
  right: 0;
  margin-right: 4px;
}
.list-group-item_img2 {
  position: absolute;
  width: 18px;
  right: 0;
  margin-right: 4px;
}
.list-group-item {
  cursor: move;
  float: left;
  width: 20%;
}
.list-group-item-div {
  padding: 10px 0px;
}
.ul-draggable {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
</style>
